@import "../../styles/utils/index";

@include c(article-panel) {
  @include padding(null, px2rem(20px * 2), null, px2rem(20px * 2));

  @include e(header) {
    @include text--middle(px2rem(48px * 2));

    width: 100%;
    position: relative;
    background: {
      image: url("./images/title.png");
      size: px2rem(240px), px2rem(30px);
      repeat: no-repeat;
      position: center center;
    }
  }

  @include e(title) {
    text-align: center;
  }

  @include e(more) {
    @include position--absolute(50%, 0);
    @include size(px2rem(58px), px2rem(18px));

    padding: px2rem(10px);
    margin-right: px2rem(-10px);
    box-sizing: content-box;
    transform: translateY(-50%);
    background: {
      image: url("./images/more.png");
      size: px2rem(58px) px2rem(18px);
      position: center center;
      repeat: no-repeat;
    }
  }

  @include e(body) {
    @include m(padding-top-30) {
      padding-top: px2rem(30px);
    }
  }
}
